<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'transfer-demo-base'">
    <div class="devui-demo-title">{{ 'components.transfer.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.transfer.basicDemo.description' | translate }}</div>
    <d-codebox id="transfer-basic" [sourceData]="basicSource">
      <d-transfer-demo-base demo></d-transfer-demo-base>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'transfer-demo-search'">
    <div class="devui-demo-title">{{ 'components.transfer.searchDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.transfer.searchDemo.description' | translate }}</div>
    <d-codebox id="transfer-search" [sourceData]="searchSource">
      <d-transfer-demo-search demo></d-transfer-demo-search>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'transfer-demo-sort'">
    <div class="devui-demo-title">{{ 'components.transfer.sortDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.transfer.sortDemo.description' | translate }}</div>
    <d-codebox id="transfer-sort" [sourceData]="sortSource">
      <d-transfer-demo-sort demo></d-transfer-demo-sort>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'transfer-demo-custom'">
    <div class="devui-demo-title">{{ 'components.transfer.customDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.transfer.customDemo.description' | translate }}</div>
    <d-codebox id="transfer-custom" [sourceData]="customSource">
      <d-transfer-demo-custom demo></d-transfer-demo-custom>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'transfer-demo-virtual-scroll'">
    <div class="devui-demo-title">{{ 'components.transfer.vitrualScrollDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-transfer-virtual-scroll" [sourceData]="TransferDemoVirtualScroll">
      <d-demo-transfer-virtual-scroll demo></d-demo-transfer-virtual-scroll>
    </d-codebox>
  </div>
</div>
